<!-- vue2版本的加载关键帧动画 -->
<template>
  <div ref="chartRef" class="echarts-container"></div>
</template>

<script >
//import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';

export default {
  name: 'EChartsChart',
  data () {
    return {
      myChart: null,
      option: {
        graphic: {
          elements: [//图形元素集合
            {
              type: 'text',
              left: 'center',
              top: 'center',
              style: {
                text: 'Welcome to person center',
                fontSize: 80,
                fontWeight: 'bold',//粗体
                lineDash: [0, 200],//虚线[线段长度，线段之间间隔长度]
                lineDashOffset: 0,//虚线偏移量
                fill: 'transparent',//填充色
                stroke: '#000',//线条色
                lineWidth: 1//线条宽度
              },
              keyframeAnimation: {//关键帧动画
                duration: 3000,//动画时长
                loop: true,//是否循环播放
                keyframes: [//动画的关键帧
                  {
                    // 关键帧位置。0 为第一帧，1 为最后一帧
                    // 关键帧时间为 percent * duration + delay（动画延迟时长）
                    percent: 0.7,//动画进度
                    style: {
                      fill: 'transparent',
                      lineDashOffset: 200,
                      lineDash: [200, 0]
                    }
                  },
                  {
                    // 停顿一段时间。
                    percent: 0.8,
                    style: {
                      fill: 'transparent'
                    }
                  },
                  {
                    percent: 1,
                    style: {
                      fill: 'black'
                    }
                  }
                ]
              }
            }
          ]
        }
      }
    }
  },

  mounted () {
    this.initChart();
  },
  beforeDestroy () {
    this.destroyChart();
  },
  methods: {
    initChart () {
      if (this.$refs.chartRef) {
        this.myChart = echarts.init(this.$refs.chartRef);
        this.myChart.setOption(this.option);
      }
    },
    destroyChart () {
      if (this.myChart) {
        this.myChart.dispose();
        this.myChart = null;
      }
    }
  }
}
</script>

<style scoped>
.echarts-container {
  width: 100%;
  height: 400px; /* 设置容器的高度 */
}
</style>